<template>
  <div>
    <!-- 封装音乐列表组件 -->
    <el-table :data="List" style="width: 100%"  size="mini"
      v-if="isDisplay" @row-dblclick="playMusic" empty-text="当前没有音乐哦" tooltip-effect="light">
      <el-table-column  type="index" width="50">
        <template v-slot="scope">
          <!-- 对于播放行的表示判断，数字，播放，不播放 -->
          <span class="active-color" v-if="showCurren(scope.row.id)"><i v-if="isPlay"
              class="iconfont icon-shengyin_shiti"></i><i v-else class="iconfont icon-sound"></i></span>
          <span v-else style="color: #c3c3db">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column width="25">
        <template v-slot="{ row }">
          <div class="pointer" @click="addMusic(row.id)">
            <i class="el-icon-folder-add" title="收藏"></i>
          </div>
        </template>
      </el-table-column>
      <!-- 未登录时不需要这个删除按钮 -->
      <el-table-column v-if="type != 1 && isLogin" width="25">
        <template v-slot="{ row }">
          <div class="pointer" @click="deleteMusic(row.id)">
            <i vi-if="isLogin" class="el-icon-delete" title="删除"></i>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="音乐标题" show-overflow-tooltip>
        <template v-slot="{ row }">
          <span :class="{ 'active-color': showCurren(row.id) }">{{
            row.title
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="artist" show-overflow-tooltip label="歌手" :width="artistColLength">
        <template v-slot="{ row }">
          <span class="pointer artist-list">{{ row.artist }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="album" label="专辑名" width="300" show-overflow-tooltip v-if="!isPhone">
        <template v-slot="{ row }">
          <span class="pointer">{{ row.album }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="dt" label="时长" width="120" v-if="!isPhone">
        <template v-slot="{ row }">
          {{ (row.time) | timeFormat }}
        </template>
      </el-table-column>
    </el-table>
    <AddMusicDialog ref="addDialog" :musicId="musicId" :currentPlayListId="currentPlayListId" />
  </div>
</template>

<script>
import { mapState } from "vuex";
import { deleteMusicFromList, getPlayListDetail } from "@/api/api_playlist";
import AddMusicDialog from "@/components/add-music-dialog/AddMusicDialog";

export default {
  components: { AddMusicDialog },
  props: {
    list: {
      type: Array,
      required: true,
      default: () => { },
    },
    currentPlayListId: {
      type: String,
      required: false,
      default: () => { },
    },
    type: {
      type: Number,
      required: false,
      default: () => { },
    },
  },
  created() {
    this.List = this.list
  },
  data() {
    return {
      musicId: null,
      List: []
    };
  },
  computed: {
    ...mapState(["musicList", "currenMusicId", "isPlay", "isPhone", "isLogin"]),
    isDisplay() {
      return this.list ? true : false;
    },
    artistColLength() {
      return this.isPhone ? 80 : 180;
    },

  },
  watch:{
    list(){//使得响应式能继续实现。
      this.List = this.list
    }
  },
  methods: {
    openAddDialog() {
      this.$refs["addDialog"].openDialog();
    },
    //  播放音乐
    playMusic(row) {
      this.$store.dispatch("playMusic", {
        list: this.list,
        id: row.id,
      });
    },
    /* 播放当前列表 */
    playMusicAll() {  
      if (this.list.length == 0) return;
      let id = this.list[0].id;
      this.$store.dispatch("playMusic", {
        list: this.list,
        id,
      });
    },
    showCurren(id) {
      return this.currenMusicId === id;
    },
    addMusic(id) {
      this.musicId = id;
      this.openAddDialog();
    },
    deleteMusic(id) {
      this.$confirm("此操作将删除该歌曲, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const params = {
            musicId: id,
            playId: this.currentPlayListId,
            token: localStorage.getItem("token"),
          };
          const res = await deleteMusicFromList(params);//从歌单中删除歌曲
          if (res.data.code !== 200) {
            this.$message({ type: "warning", message: "删除失败" });
            return;
          }
          this.updatePlayList();
          this.$message({ type: "success", message: "删除成功" });
        })
        .catch(() => {
          this.$message({ type: "info", message: "已取消删除" });
        });
    },
    async updatePlayList() {
      const res = await getPlayListDetail(this.currentPlayListId);
      console.log(res);
      if (res.code !== 200) return;
      //这里删除没有成功，另外的组件数据是冻结起来的不能修改
      //问题解决！！！
      //这里要改变列表歌曲条数和上面标题的歌曲数目
      this.$emit("updateNum", res.data.tracks)
      this.List = Object.freeze(res.data.tracks);
    },
  },
};
</script>

<style lang="less" scoped>
@import "@/assets/less/lessConfig.less";

.active-color {
  color: #4185ec;
}

.artist-list {
  &::after {
    display: inline;
    margin: 2px;
    content: "/";
  }

  &:last-child::after {
    content: "";
  }
}



::v-deep  .el-table {
    background-color: @shallow-deeper;
  }
  .el-table::before{
    height: 0px;
  }
/*最外层透明*/
::v-deep .el-table__expanded-cell{
  background-color: transparent;
}
/* 表格内背景颜色 */
::v-deep .el-table td,
::v-deep .el-table tr
{
  background-color: transparent;
}
::v-deep .el-table th {
  background-color:@shallow-deeper1;
}

</style>
